<template>
    <div class="j-all">
        <div class="j-left">
            <div class="tip1">{{ $t('message.setting.a') }}</div>
            <div class="email-bind d-flex" v-if="setting.user.info?.email">
                <div class="email bind d-flex align-center">{{ setting.user.info?.email }}</div>
            </div>
            <div class="email-bind email-input d-flex" v-else>
                <JInput class="email  d-flex align-center" :placeholder="$t('message.RegisterVerify_.d')"
                    v-model="email">
                </JInput>
                <div class="btn  d-flex align-center justify-center" @click="openEamil">{{
                    $t('message.setting.hh') }}
                </div>
            </div>
            <div v-if="user.info?.userType != 3">
                <div class="tip1" style="margin-top: 20px;">{{ $t('message.setting.e') }}</div>
                <div class="email-bind d-flex">
                    <div class="email bind d-flex align-center" v-if="setting.user.info?.address">{{
                       setting.user.info?.address }}</div>
                    <div class="wallect-btn d-flex align-center justify-center" v-if="!setting.user.info?.address"
                        @click="bindWallet">{{  $t('message.setting.d') }}</div>
                </div>
            </div>
            <!-- 绑定metamask -->
            <!-- <div class="tip1" style="margin-top: 20px;">MetaMask</div>
            <div class="email-bind d-flex">
                <div class="email d-flex align-center">{{ setting.user.info?.email }}</div>
                <div  class="btn d-flex align-center justify-center" @click="setting.Jleft.open">Bind MetaMask</div>
            </div> -->

        </div>
        <div class="j-right">
            <div class="tip1">{{ $t('message.setting.b') }}</div>
            <div class="tip2">{{ $t('message.setting.c') }}</div>
            <div class="cards d-flex">
                <Card v-for="item in setting.Jright.cards.value" :card="item" :key="item.label" :callfun="item.callfn">
                </Card>
            </div>
        </div>
    </div>
    <EmailVerify v-show="setting.Jleft.show.value" :show="setting.Jleft.show.value" :email="email"
        :close="setting.Jleft.close">
    </EmailVerify>
</template>

<script setup lang="ts">
import EmailVerify from "@/views/setting/components/Emailverify.vue";
import { computed, onMounted, watch, ref } from "vue";
// import { user } from "../script/user";
import Card from "./components/crad.vue";
import { setting } from "./script/setting";
import { useAccount } from "@/stores/account";
import { useUser } from "@/stores/user";
import { walletModal } from '@/comm/Wallet';
import JInput from "@/components/j-input/index.vue";
import { formatHashName } from "@/comm/format";
const user = useUser();
const accout = useAccount();
const email = ref<any>("");
const emailErro = ref<any>("");
// function isBindEmail(): boolean {
//     if (user.info?.email) {
//         return false;
//     }
//     return true;
// }
let noEmail = ref(false)
watch(() => user.info, async (val) => {
    init()
    setting.init();
})
const isBindEmail = computed(() => {
    return user.noEmail;
})
function init() {
    if (localStorage.getItem("token")) {
        if (user.info && !user.info.email) {
            noEmail.value = true;
        }
    }
    noEmail.value = false;
}
function openEamil() {
    setting.Jleft.open();
}
function bindWallet() {
    walletModal.newModal();
    walletModal.WalletConnect();
}

onMounted(() => {
    setting.init();
    init()
});
</script>

<style lang="less" scoped>
.bind-button {
    width: 150px;
}

.email-input {
    :deep(.j-input-txt) {
        border-radius: 4px 0 0 4px !important;
    }
    // .j-input {
    //     border-radius: 4px 0 0 4px !important;
    // }

    // .j-input{
    //     background-color: aqua !important;
    // }
    // :deep(.j-input .j-input-txt) {
    //     border-radius: 4px 0 0 4px !important;
    // }
}



.j-all {
    display: flex;
    gap: var(--space);
    // background-color: blue;
    margin-inline: 30px;
    margin-bottom: var(--space);

    .j-left {
        width: 50%;
        padding-top: 32px;
        padding-left: 30px;
        padding-right: 20px;
        padding-bottom: 75px;
        background: var(--card);
        border-radius: var(--radius);

        .email-bind {
            margin-top: 17px;
            height: 38px;

            .bind {
                padding-left: 10px;
            }


            .email {
                flex: 1;
                background: #1F232A;
                border-radius: 4px;
            }

            .wallect-btn {
                cursor: pointer;
                min-width: 130px;
                background: var(--main);
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 25px;
                &:active {
                    background-color: var(--main-act);
                }
            }

            .btn {
                cursor: pointer;
                // flex: 1;
                width: 120px;
                background: var(--main);
                border-radius: 0 4px 4px 0;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 25px;

                &:active {
                    background-color: var(--main-act);
                }
            }
        }


    }

    .j-right {
        padding-top: 32px;
        padding-left: 30px;
        padding-right: 20px;
        padding-bottom: 75px;
        width: 50%;
        background: var(--card);
        border-radius: var(--radius);

        .cards {
            .card {
                &:not(:first-child) {
                    margin-left: 20px;
                }
            }
        }

        .tip2 {
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #B1B6C6;
            line-height: 17px;
            margin-top: 9px;
            margin-bottom: 26px;
        }
    }

    .j-left,
    .j-right {
        .tip1 {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #EAECEF;
            line-height: 22px;
        }
    }
}</style>